<template>
  <div class="container">
    <h2>注册</h2>
    <form @submit.prevent="handleRegister">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="username" required class="form-control" />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password" required class="form-control" />
      </div>
      <div class="form-group captcha-group">
        <label for="captcha">验证码</label>
        <div class="captcha-wrapper">
          <input type="text" id="captcha" v-model="captcha" required class="captcha-input" />
          <img :src="captchaImage" alt="captcha" @click="refreshCaptcha" class="captcha-image" />
        </div>
      </div>
      <button type="submit" class="btn btn-primary">注册</button>
    </form>
    <p class="text-center">
      已有账号？<a href="#" @click="showLogin" @click.prevent>去登录</a>
    </p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useAuthStore } from '@/stores/auth';
import { defineEmits } from 'vue';

const username = ref('');
const password = ref('');
const captcha = ref('');
const authStore = useAuthStore();
const emit = defineEmits(['login']);
const captchaImage = ref('');
const correctCaptcha = ref('');

// 生成验证码
const generateCaptcha = () => {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < 6; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  correctCaptcha.value = result;

  // 生成带遮挡的验证码图像
  let svgContent = `<svg width="120" height="40" xmlns="http://www.w3.org/2000/svg">
                      <rect width="120" height="40" fill="#f0f0f0" />
                    `;

  // 添加线条遮挡
  for (let i = 0; i < 5; i++) {
    const x1 = Math.floor(Math.random() * 120);
    const y1 = Math.floor(Math.random() * 40);
    const x2 = Math.floor(Math.random() * 120);
    const y2 = Math.floor(Math.random() * 40);
    svgContent += `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="#ccc" stroke-width="1" />`;
  }

  // 添加文本验证码
  svgContent += `<text x="10" y="30" font-family="Arial" font-size="20" fill="#333">${result}</text>
                </svg>`;

  // 将 SVG 转换为 Base64 编码的 Data URL
  captchaImage.value = `data:image/svg+xml;base64,${btoa(svgContent)}`;
};

// 刷新验证码
const refreshCaptcha = () => {
  generateCaptcha();
};

// 初始化验证码
generateCaptcha();

const handleRegister = () => {
  if (!captcha.value) {
    alert('请输入验证码');
    return;
  }

  // 不区分大小写的验证码验证
  if (captcha.value.toLowerCase() !== correctCaptcha.value.toLowerCase()) {
    alert('验证码错误');
    refreshCaptcha();
    return;
  }

  const users = JSON.parse(localStorage.getItem('users')) || [];

  if (users.some(u => u.username === username.value)) {
    alert('用户名已存在');
    return;
  }

  const newUser = { username: username.value, password: password.value };
  users.push(newUser);
  localStorage.setItem('users', JSON.stringify(users));

  // 显示注册成功提示
  alert('注册成功！');
  
  // 跳转到登录页面
  emit('login');
};

const showLogin = () => {
  emit('login'); // 发出 login 事件通知父组件
};
</script>

<style scoped>
.container {
  max-width: 350px;
  margin: 20px auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-control {
  width: calc(100% - 50px);
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.btn {
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary {
  background-color: #007bff;
  color: white;
  margin-top: 10px;
  width: calc(100% - 30px);
}

.text-center {
  text-align: center;
  margin-top: 15px;
}

a {
  color: #007bff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
.captcha-group{
  width: calc(100% - 30px);

}
.captcha-group .captcha-wrapper {
  display: flex;
  align-items: center;
}
.captcha-input {
  width: 60%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  margin-right: 10px;
  height: 20px;
}

.captcha-image {
  width: 40%;
  height: 40px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 0 4px 4px 0;
}
</style>